<script setup>
import { reactive, ref, onBeforeMount } from "vue";
import { useRoute } from "vue-router";
import {
  getPostByIdService,
  getPostCommentService,
  addPostCommentService,
} from "@/api/info";
import { useAuthStore } from "@/stores";
import { ElMessage } from "element-plus";

const authStore = useAuthStore();

const route = useRoute();
const articleId = ref(route.params.id); // 获取动态路由参数
const articleData = reactive({
  user: {}, // 初始化 user 避免 undefined
}); // 文章数据
const commentsData = reactive([]); // 评论数据

//  获取文章数据
onBeforeMount(async () => {
  try {
    const resArticle = await getPostByIdService(articleId.value);
    const resComment = await getPostCommentService(articleId.value);
    Object.assign(articleData, resArticle.data); // 更新 reactive 对象
    Object.assign(commentsData, resComment.data); // 更新 reactive 对象
  } catch (err) {
    console.error("加载文章失败:", err);
  }
});

// 获取评论数据
const userId = ref(authStore.user.id);
const comments = ref(""); // 输入框中评论数据

const submitComment = async () => {
  try {
    // 非空判断
    if (!comments.value.trim()) {
      ElMessage.warning("评论内容不能为空！");
      return;
    }
    // 数据封装
    const addComments = reactive({
      post_id: articleId.value,
      user_id: userId,
      content: comments.value,
    });
    // 调用接口添加评论
    const response = await addPostCommentService(addComments);
    commentsData.unshift({ ...response.data }); // 插入新评论
    comments.value = ""; // 清空输入框
  } catch (err) {
    console.error("评论失败:", err);
    ElMessage.error("评论提交失败，请重试！");
  }
};

// 发布评论功能
</script>

<template>
  <!-- 主要内容 -->
  <div class="container main-content">
    <div class="content-grid">
      <!-- 文章内容 -->
      <div>
        <!-- 文章头部 -->
        <div class="article-card">
          <div class="article-content">
            <div class="article-header">
              <div class="article-meta">
                <span class="article-tag">攻略</span>
                <span class="article-date">{{ articleData.created_at }}</span>
              </div>
              <div class="article-stats">
                <span class="article-stat">{{ articleData.view_count }} 浏览</span>
                <span class="article-stat">32 评论</span>
                <span class="article-stat">16 点赞</span>
              </div>
            </div>
            <h1 class="article-title">{{ articleData.title }}</h1>
            <div class="article-author">
              <img
                class="author-avatar"
                :src="articleData.user.avatar_url"
                alt="作者头像"
              />
              <div class="author-info">
                <p class="author-name">{{ articleData.user.username }}</p>
                <p class="author-title">资深玩家</p>
              </div>
            </div>
          </div>
        </div>

        <div class="article-card">
          <div class="article-content">
            <p>{{ articleData.content }}</p>
          </div>
        </div>
        <!-- 文章正文 -->
        <!-- <div class="article-card">
          <div class="article-content">
            <p>
              春季是星露谷的开始，也是最重要的季节之一。本文将详细介绍如何在春季获得最大收益，为后续发展打下坚实基础。
            </p>

            <h2>1. 第一天：清理农场</h2>
            <p>
              游戏开始的第一天，你需要清理农场中的杂草和石头。这些资源在后期都会用到，建议收集起来。
            </p>
            <img
              src="https://images.unsplash.com/photo-1612287230202-1ff1d85d1bdf?w=500&auto=format&fit=crop&q=60"
              alt="农场清理"
            />

            <h2>2. 种植计划</h2>
            <p>春季推荐种植以下作物：</p>
            <ul>
              <li>防风草：生长周期短，收益稳定</li>
              <li>土豆：产量高，适合新手</li>
              <li>花椰菜：收益较高，但生长周期长</li>
            </ul>

            <h2>3. 社交活动</h2>
            <p>春季是建立社交关系的好时机。建议多与村民互动，特别是：</p>
            <ul>
              <li>皮埃尔：购买种子</li>
              <li>威利：钓鱼相关</li>
              <li>罗宾：建筑升级</li>
            </ul>
          </div>
        </div> -->

        <!-- 互动区域 -->
        <div class="article-card">
          <div class="article-content">
            <div class="interaction-bar">
              <div class="interaction-buttons">
                <button class="interaction-button">
                  <svg
                    class="interaction-icon"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
                    />
                  </svg>
                  <span>点赞 (16)</span>
                </button>
                <button class="interaction-button">
                  <svg
                    class="interaction-icon"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
                    />
                  </svg>
                  <span>收藏 (32)</span>
                </button>
                <button class="interaction-button">
                  <svg
                    class="interaction-icon"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      stroke-width="2"
                      d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
                    />
                  </svg>
                  <span>分享</span>
                </button>
              </div>
              <!-- <div class="action-buttons">
                <button class="action-button">编辑</button>
                <button class="action-button delete">删除</button>
              </div> -->
            </div>
          </div>
        </div>

        <!-- 评论区 -->
        <div class="article-card">
          <div class="article-content">
            <h3 class="comment-title">评论 (32)</h3>

            <!-- 评论输入框 -->
            <div class="comment-form">
              <textarea
                class="comment-textarea"
                placeholder="写下你的评论..."
                v-model="comments"
              ></textarea>
              <div class="comment-submit">
                <button class="login-btn" @click="submitComment">发表评论</button>
              </div>
            </div>

            <!-- 评论列表 -->
            <div class="comment-list">
              <!-- 评论 1 -->
              <div
                class="comment-item"
                v-for="(item, index) in commentsData"
                :key="item.comment_id"
              >
                <img class="comment-avatar" :src="item.user.avatar_url" alt="用户头像" />
                <div class="comment-content">
                  <div class="comment-header">
                    <h4 class="comment-author">{{ item.user.username }}</h4>
                    <span class="comment-time">{{ item.user.created_at }}</span>
                  </div>
                  <p class="comment-text">{{ item.content }}</p>
                  <div class="comment-actions">
                    <button class="comment-action">回复</button>
                    <button class="comment-action">点赞 (5)</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧边栏 -->
      <div class="sidebar">
        <!-- 作者信息 -->
        <div class="sidebar-card">
          <div class="sidebar-content">
            <div class="sidebar-author">
              <img
                class="sidebar-avatar"
                :src="articleData.user.avatar_url"
                alt="作者头像"
              />
              <div class="sidebar-author-info">
                <h3 class="sidebar-author-name">{{ articleData.user.username }}</h3>
                <p class="sidebar-author-title">资深玩家</p>
              </div>
            </div>
            <button class="follow-button">关注作者</button>
          </div>
        </div>

        <!-- 相关推荐 -->
        <div class="sidebar-card">
          <div class="sidebar-content">
            <h3 class="sidebar-title">相关推荐</h3>
            <div class="related-list">
              <a href="#" class="related-item">
                <h4 class="related-title">春季钓鱼完全指南</h4>
                <p class="related-excerpt">
                  春季是钓鱼的好时机，本文详细介绍各种鱼类的获取方法...
                </p>
              </a>
              <a href="#" class="related-item">
                <h4 class="related-title">春季社交攻略</h4>
                <p class="related-excerpt">
                  如何快速提升与村民的好感度，获取更多游戏资源...
                </p>
              </a>
              <a href="#" class="related-item">
                <h4 class="related-title">春季节日活动指南</h4>
                <p class="related-excerpt">春季各个节日的参与方法和奖励获取攻略...</p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
body {
  font-family: "Noto Sans SC", sans-serif;
  background-color: #f9fafb;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* 导航栏样式 */
.navbar {
  background-color: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
  padding: 0 1rem;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.navbar-logo {
  height: 2rem;
  width: auto;
}

.navbar-title {
  margin-left: 0.5rem;
  font-size: 1.25rem;
  font-weight: bold;
  color: #059669;
}

.navbar-nav {
  display: none;
}

.nav-link {
  color: #6b7280;
  text-decoration: none;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
}

.nav-link:hover {
  color: #374151;
  border-bottom-color: #d1d5db;
}

.login-btn {
  background-color: #059669;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

.login-btn:hover {
  background-color: #047857;
}

/* 主要内容区域 */
.main-content {
  padding: 2rem 0;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* 文章卡片 */
.article-card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 2rem;
}

.article-content {
  padding: 1.5rem;
  line-height: 1.8;
}

.article-content p {
  margin-bottom: 1.5rem;
  color: #374151;
}

.article-content img {
  width: 100%;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
  display: block;
}

.article-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.article-meta {
  display: flex;
  align-items: center;
}

.article-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: #dcfce7;
  color: #166534;
}

.article-date {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.article-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.article-stat {
  font-size: 0.875rem;
  color: #6b7280;
}

.article-title {
  font-size: 1.875rem;
  font-weight: bold;
  color: #111827;
  margin-bottom: 1rem;
}

.article-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.article-author img {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  margin: 1.5rem 0;
  display: block;
}

.article-author p {
  margin-bottom: 0.5rem;
}

.comment-item .comment-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
}

.author-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  object-fit: cover;
}

.author-info {
  margin-left: 0.75rem;
}

.author-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  margin: 0;
}

.author-title {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

/* 互动区域 */
.interaction-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.interaction-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.interaction-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #6b7280;
  text-decoration: none;
  font-size: 0.875rem;
}

.interaction-button:hover {
  color: #059669;
}

.interaction-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.action-button {
  font-size: 0.875rem;
  color: #6b7280;
  text-decoration: none;
}

.action-button:hover {
  color: #374151;
}

.action-button.delete {
  color: #ef4444;
}

.action-button.delete:hover {
  color: #dc2626;
}

/* 评论区 */
.comment-section {
  margin-top: 2rem;
}

.comment-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
  margin-bottom: 1rem;
}

.comment-form {
  margin-bottom: 1.5rem;
}

.comment-textarea {
  width: 90%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  resize: vertical;
  min-height: 6rem;
}

.comment-textarea:focus {
  outline: none;
  border-color: #059669;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.1);
}

.comment-submit {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.comment-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.comment-item {
  display: flex;
  gap: 1rem;
}

.comment-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comment-author {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
}

.comment-time {
  font-size: 0.875rem;
  color: #6b7280;
}

.comment-text {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #374151;
}

.comment-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.comment-action {
  font-size: 0.875rem;
  color: #6b7280;
  text-decoration: none;
}

.comment-action:hover {
  color: #374151;
}

/* 侧边栏 */
.sidebar {
  margin-top: 2rem;
}

.sidebar-card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 2rem;
}

.sidebar-content {
  padding: 1.5rem;
}

.sidebar-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
  margin-bottom: 1rem;
}

.sidebar-author {
  display: flex;
  align-items: center;
}

.sidebar-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
}

.sidebar-author-info {
  margin-left: 1rem;
}

.sidebar-author-name {
  font-size: 1.125rem;
  font-weight: 500;
  color: #111827;
  margin: 0;
}

.sidebar-author-title {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

.follow-button {
  width: 100%;
  background-color: #059669;
  color: white;
  padding: 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  margin-top: 1rem;
}

.follow-button:hover {
  background-color: #047857;
}

.related-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.related-item {
  display: block;
  text-decoration: none;
}

.related-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  margin: 0;
}

.related-excerpt {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #6b7280;
}

/* 响应式设计 */
@media (min-width: 640px) {
  .navbar-nav {
    display: flex;
    gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .content-grid {
    grid-template-columns: 2fr 1fr;
  }

  .sidebar {
    margin-top: 0;
  }
}
</style>
